<template>
  <v-timeline>
    <v-timeline-item
      dot-color="purple-lighten-2"
      fill-dot
    >
      <v-card>
        <v-card-title class="bg-purple-lighten-2">
          <v-icon
            class="me-4"
            icon="mdi-magnify"
            size="large"
          ></v-icon>
          <h2 class="font-weight-light">
            Title 1
          </h2>
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
        </v-card-text>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      dot-color="amber-lighten-1"
      size="x-small"
      fill-dot
    >
      <v-card>
        <v-card-title class="bg-amber-lighten-1 justify-end">
          <h2 class="me-4 font-weight-light">
            Title 2
          </h2>
          <v-icon
            icon="mdi-home-outline"
            size="large"
          ></v-icon>
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
        </v-card-text>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      dot-color="cyan-lighten-1"
      fill-dot
    >
      <v-card>
        <v-card-title class="bg-cyan-lighten-1">
          <v-icon
            class="me-4"
            icon="mdi-email-outline"
            size="large"
          ></v-icon>
          <h2 class="font-weight-light">
            Title 3
          </h2>
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
        </v-card-text>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      dot-color="red-lighten-1"
      size="x-small"
      fill-dot
    >
      <v-card>
        <v-card-title class="bg-red-lighten-1 justify-end">
          <h2 class="me-4 font-weight-light">
            Title 4
          </h2>
          <v-icon
            icon="mdi-account-multiple-outline"
            size="large"
          ></v-icon>
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
        </v-card-text>
      </v-card>
    </v-timeline-item>

    <v-timeline-item
      dot-color="green-lighten-1"
      fill-dot
    >
      <v-card>
        <v-card-title class="bg-green-lighten-1">
          <v-icon
            class="me-4"
            icon="mdi-phone-in-talk"
            size="large"
          ></v-icon>
          <h2 class="font-weight-light">
            Title 5
          </h2>
        </v-card-title>
        <v-card-text>
          Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
        </v-card-text>
      </v-card>
    </v-timeline-item>
  </v-timeline>
</template>
